<template>
  <el-container class="header-wrapper">
    <el-aside class="logo">
      <video id="logo-video" :poster="videoUrl" autoplay muted loop
             playsinline type="video/mp4" :src="videoUrl"></video>
    </el-aside>
    <el-container class="content">
      <el-empty :description="$t('mes.noDataYet')" v-if="!data"/>
      <el-row class="m-border-2 m-solid m-border-radius-10 m-border-color-6366f1 m-border-blink"  :gutter="5" style="width: 100%;padding: 5px 0 5px 0" v-else>
        <el-col :span="3">
          <shift-time-card/>
        </el-col>
        <el-col :span="3">
          <process-fieldset :text-style="{fontSize:'30px',lineHeight: '90px'}"
                            :img-style="{height:'50px',marginTop:'10px'}"
                            :url="icon1"
                            :name="processName"></process-fieldset>
        </el-col>
        <el-col :span="18">
          <el-row :gutter="5" style="width: 100%;">
            <el-col v-for="(item,index) in data" :key="index" :span="item.span">
              <data-fieldset :text-style="{fontSize:'20px'}" :img-style="{height:'50px',marginTop:'10px'}"
                             :title="item.name" :url="item.icon" :value="item.value" :unit="unit[index]?unit[index]:' '"
                             :textClass="`color${index+1}`"></data-fieldset>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-container>
  </el-container>
</template>
<script>
import processFieldset from '@/components/mes/common/processFieldset'
import config from '@/config/index'
import dataFieldset from '@/components/mes/JCLines/dataFieldset'
import ShiftTimeCard from '@/components/mes/common/shiftTimeCard.vue'

export default {
  name: 'lineHeader',
  components: {
    ShiftTimeCard,
    processFieldset,
    dataFieldset
  },
  props: {
    processName: {
      type: String,
      default: '-'
    },
    data: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      unit: ['pcs', 'pcs', 'pcs', 'kg', 'pcs', 'pcs'],
      videoUrl: config.ossUrl + '/afl-data-screen/images/job.mp4',
      icon1: config.ossUrl + '/afl-data-screen/images/icon-screen.png'
    }
  },
  mounted () {
  }
}
</script>

<style scoped lang="scss">
.header-wrapper {
  height: 100%;
  border-bottom: 3px solid #7952B3;

  .content {
    padding: 10px;
  }
}

.logo {
  width: 300px;
  overflow: hidden;
  /*background: url("@/images/numberBg1.png") no-repeat;*/
  /*background-size: 100% 100%;*/
  /*padding: 0;*/
  /*text-align: center;*/
}

#logo-video {
  width: 250px;
  height: 100%;
  mix-blend-mode: darken;
}
</style>
